<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title data-i18next="break.title"></title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/color-scheme.css">
    <link rel="stylesheet" type="text/css" href="css/commons.css">
    <link rel="stylesheet" type="text/css" href="css/break.css">
  </head>
  <body>
    <div class="breaks">
      <div>
        <div class="break-idea" dir="auto"></div>
        <div class="break-text" dir="auto"></div>
        <progress id='progress' max="10000" aria-hidden="true"></progress>
        <span id='progress-time' aria-hidden="true"></span>
      </div>
      <div>
        <a id="postpone" class="tooltip top hidden">
          <span data-i18next="break.postpone"></span>
          <img src="images/breaks/break-postpone.svg" />
          <span class="tiptext"></span>
        </a>
        <a id="close" class="tooltip top hidden">
          <span data-i18next="break.skip"></span>
          <img src="images/breaks/break-skip.svg" />
          <span class="tiptext"></span>
        </a>
        <a id="finish" class="tooltip top hidden">
          <span data-i18next="break.finish"></span>
          <img src="images/breaks/break-finish.svg" />
          <span class="tiptext"></span>
        </a>
      </div>
      <div>
      </div>
    </div>
  </body>
  <script type="module" src="./break-renderer.js"></script>
</html>
